<template>
  <div class="echart" ref='allStraff'>
  
    <ul style="margin-bottom:40px">
      <el-collapse-transition>
        <li v-if='c1.close'>
          
          <div>
    
            <h3 class='title'>
    
              <span>员工分布</span>
    
              <span>
    
                <i class="fa fa-minus" v-if='c1.min' @click.stop='c1.min = false'></i>

                <i class="fa fa-plus" v-else @click.stop='c1.min = true'></i>

                <i class="fa fa-times" @click.stop='c1.close = false'></i>

              </span>
    
            </h3>
    
            <el-collapse-transition>
    
              <div class='content1' v-show='c1.min'>
    
    
                <div class="wrapper">
    
                  <h3><span>#</span><span>单位</span><span>人数</span><span>占比</span></h3>
    
                  <div v-if='title' v-for='(k,i) in resComputed.distribution'>
    
                    <span>{{i+1}}</span><span>{{k.descrshort}}</span><span>{{k.jobempcount}}</span><span>{{k.jobempscale}}</span>
    
                  </div>
    
                  <div v-if='!title' v-for='(k,i) in resComputed.distribution'>
    
                    <span>{{i+1}}</span><span>{{k.descrshort}}</span><span>{{k.descrcount}}</span><span>{{k.descrscale}}</span>
    
                  </div>
    
    
    
                </div>
    
              </div>
    
    
            </el-collapse-transition>
    
    
          </div>
          
        </li>
      </el-collapse-transition> 

      <el-collapse-transition>

        <li v-if='c2.close'>
    
          <h3 class='title'>
    
            <span>员工性别比例</span>
    
            <span>
    
              <i class="fa fa-minus" v-if='c2.min' @click.stop='c2.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c2.min = true'></i>

              <i class="fa fa-times" @click.stop='c2.close = false'></i>

            </span>
    
          </h3>


          <el-collapse-transition>

            <div v-show='c2.min' id='content2' style='width:528.16px;height:420px'></div>

          </el-collapse-transition> 

        </li>
      </el-collapse-transition> 


      <el-collapse-transition>
        <li v-if='c3.close'>
    
          <h3 class='title'>
    
            <span>员工学历结构</span>
    
            <span>
      
                <i class="fa fa-minus" v-if='c3.min' @click.stop='c3.min = false'></i>

                <i class="fa fa-plus" v-else @click.stop='c3.min = true'></i>

                <i class="fa fa-times" @click.stop='c3.close = false'></i>

            </span>
    
          </h3>
          
          <el-collapse-transition>

             <div id='content3' v-show='c3.min' style='width:528.16px;height:420px'></div>
          </el-collapse-transition> 
        </li>
      </el-collapse-transition> 

      <el-collapse-transition>

        <li v-if='c4.close'>
    
          <h3 class='title'>
    
            <span>员工年龄结构</span>
    
            <span>
      
              <i class="fa fa-minus" v-if='c4.min' @click.stop='c4.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c4.min = true'></i>

              <i class="fa fa-times" @click.stop='c4.close = false'></i>

            </span>
    
          </h3>


          <el-collapse-transition>
            <div v-show='c4.min' id='content4' style='width:528.16px;height:420px'></div>
          </el-collapse-transition> 
    
        </li>
      </el-collapse-transition> 
  
  
    </ul>
  
  
  
  
  
    <el-dialog size='' :visible.sync="dialogTableVisible">
  
      <el-table :data="tableData" style="width:800px" stripe>
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
  
        <el-table-column label="操作">
  
          <template slot-scope="scope">
            <el-button 
              size="mini"
              type="primary"
              @click="ComputedEmplid(scope)">员工履历信息</el-button>
          </template>
        </el-table-column>
      </el-table> 
    
          <el-pagination
              @current-change='currentChange'	
              :page-size="6"
              layout="total, prev, pager, next"
              :total="total"
               style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
  import echarts from "echarts";
  
  import Vue from "vue";
  
  import URL from "../../common/js/dataLookUrl";
  
  import {
  
    Table,
  
    TableColumn,
  
    Dialog,
  
    Button,
  
    Pagination
  
  } from "element-ui";
  
  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
  
  Vue.component(CollapseTransition.name, CollapseTransition)
  
  
  
  Vue.use(Table);
  
  Vue.use(TableColumn);
  
  Vue.use(Dialog);
  
  Vue.use(Button);
  
  Vue.use(Pagination);
  
  
  
  export default {
  
    data() {
  
      return {
  
        c1: {
  
          min: true,
  
          close: true
  
        },

        c2: {
  
          min: true,
  
          close: true
  
        },

        c3: {
  
          min: true,
  
          close: true
  
        },

        c4: {
  
          min: true,
  
          close: true
  
        },
  
        tableData: [],
  
        total: 0,
  
        dialogTableVisible: false,
  
        details: "",
  
        type: 0,
  
        ageRange: "",
  
        sex: "",
  
        highestEdu: ""
  
      };
  
    },
  
  
  
    props: ["res", "title", "subhead"],
  
  
  
    computed: {
  
      resComputed() {
  
        return this.res;
  
      },
  
      deptCategory() {
  
        return this.subhead;
  
      }
  
    },
  
    watch: {
  
      res(newValue, oldValue) {
  
        if (newValue !== oldValue) {
  
          this.setEcharts();
  
        }
  
      }
  
    },
  
    mounted() {
  
      this.setEcharts();
  
    },
  
    methods: {
  
      ComputedEmplid: function(data) {
  
        localStorage.setItem('resumeType', 2)
  
        localStorage.setItem('em', data.row.emplid)
  
        window.open('module/resume.html');
  
      },
  
      setEcharts() {
  
  
  
        if (this.$refs.allStraff) {
  
          /* 员工性别比例 */
  
  
  
          {
  
            let data = [{
  
                value: this.res.headquarters.boycount,
  
                name: `男：${this.res.headquarters.boycount}人(${this.res
  
                  .headquarters.boyscale})`
  
              },
  
              {
  
                value: this.res.headquarters.girlcount,
  
                name: `女：${this.res.headquarters.girlcount}人(${this.res
  
                  .headquarters.girlscale})`
  
              },
  
              {
  
                value: this.res.headquarters.othercount,
  
                name: `未知：${this.res.headquarters.othercount}人(${this.res
  
                  .headquarters.otherscale})`
  
              }
  
            ];
  
  
  
            this.$nextTick(function() {
  
              this.drawPie("#content2", data, "员工性别比例");
  
            });
  
          }
  
  
  
          /* 员工学历结构 */
  
  
  
          {
  
            let dataArr = [];
  
  
  
            this.res.education.forEach((ele, i) => {
  
              dataArr.push({
  
                value: this.res.education[i].educount,
  
                name: `${this.res.education[i].highest_edu || "未填写"}：${this.res
  
                  .education[i].educount}人(${this.res.education[i].eduscale})`
  
              });
  
            }, this);
  
  
  
            this.$nextTick(function() {
  
              this.drawPie("#content3", dataArr, "员工学历结构");
  
            });
  
          }
  
  
  
          /* 员工年龄结构 */
  
  
  
          {
  
            let data = [{
  
                value: this.res.headquarters.thirtybelowcount,
  
                name: `30岁以下：${this.res.headquarters.thirtybelowcount} 人(${this
  
                  .res.headquarters.thirtybelowscale})`
  
              },
  
              {
  
                value: this.res.headquarters.thirtytofortycount,
  
                name: `30岁到40岁：${this.res.headquarters
  
                  .thirtytofortycount} 人(${this.res.headquarters
  
                    .thirtytofortyscale})`
  
              },
  
              {
  
                value: this.res.headquarters.fortytofiftyswcount,
  
                name: `40岁到45岁：${this.res.headquarters
  
                  .fortytofiftyswcount} 人(${this.res.headquarters
  
                    .fortytofiftyswscale})`
  
              },
  
              {
  
                value: this.res.headquarters.fortytofiftysycount,
  
                name: `45岁到50岁：${this.res.headquarters
  
                  .fortytofiftysycount} 人(${this.res.headquarters
  
                    .fortytofiftysyscale})`
  
              },
  
              {
  
                value: this.res.headquarters.fiftyabovecount,
  
                name: `50岁以上：${this.res.headquarters.fiftyabovecount} 人(${this.res
  
                  .headquarters.fiftyabovescale})`
  
              }
  
            ];
  
  
  
            this.$nextTick(function() {
  
              this.drawPie("#content4", data, "员工年龄结构", "60%", false, "radius");
  
            });
  
          }
  
        }
  
      },
  
      drawPie(id, datas, name, type = "60%", showFlag = false, roseType = "") {
  
        this.charts = echarts.init(this.$refs.allStraff.querySelector(id));
  
  
  
        this.charts.setOption({
  
          tooltip: {
  
            trigger: "item",
  
            formatter: "{b}"
  
          },
  
  
  
          legend: {
  
            show: showFlag,
  
            x: "left",
  
            left: "15px",
  
            top: "10px",
  
            data: datas,
  
            formatter: function(val) {
  
              return val.split(":")[0];
  
            }
  
          },
  
          series: [{
  
            name: name,
  
            type: "pie",
  
            radius: type,
  
            center: ["45%", "50%"],
  
            data: datas,
  
            roseType: roseType,
  
            label: {
  
              normal: {
  
                show: true,
  
                formatter: function(val) {
  
                  return val.name.split("：").join("\n");
  
                }
  
              }
  
            }
  
  
  
            // labelLine: {
  
            //   normal: {
  
            //     lengh: 30,
  
            //     length2: 30
  
            //   }
  
            // }
  
          }]
  
        });
  
  
  
        this.charts.on("click", echartsData => {
  
          if (this.$route.name == 'allStaff') {
  
            let Dataname = echartsData.data.name.split("：")[0];
  
            this.ageName = "";
  
            this.sex = "";
  
            this.highestEdu = "";
  
            switch (Dataname) {
  
              case "30岁以下":
  
                this.ageName = "thirtybelow";
  
                break;
  
              case "30岁到40岁":
  
                this.ageName = "thirtytoforty";
  
                break;
  
  
  
              case "40岁到45岁":
  
                this.ageName = "fortysvfifty";
  
                break;
  
              case "45岁到50岁":
  
                this.ageName = "fortysyfifty";
  
                break;
  
              case "50岁以上":
  
                this.ageName = "fiftyabove";
  
                break;
  
              case "男":
  
                this.sex = "M";
  
                break;
  
              case "女":
  
                this.sex = "F";
  
                break;
  
              case "未知":
  
                this.sex = "Y";
  
                break;
  
              case "未填写":
  
                this.highestEdu = "empty";
  
                break;
  
              default:
  
                this.highestEdu = Dataname;
  
                break;
  
            }
  
  
  
            let params = {};
  
  
  
            if (this.ageName) {
  
              params = {
  
                ageRange: this.ageName,
  
                pageNum: 1,
  
                pageSize: 6
  
              };
  
            } else if (this.sex) {
  
              params = {
  
                sex: this.sex,
  
                pageNum: 1,
  
                pageSize: 6
  
              };
  
            } else {
  
              params = {
  
                highestEdu: this.highestEdu,
  
                pageNum: 1,
  
                pageSize: 6
  
              };
  
            }
  
  
  
  
  
            this.Axios.Post(URL.getemployeeByallList.url, params)
  
              .then(res => {
  
                this.tableData = res.data.datas;
  
                this.total = res.data.total;
  
              })
  
            this.dialogTableVisible = true;
  
          } else {
  
            this.type = "";
  
            this.details = "";
  
            let types = echartsData.seriesName;
  
            this.details = echartsData.name.split("：")[0];
  
  
  
            switch (this.details) {
  
              case "30岁以下":
  
                this.details = "thirtybelow";
  
                break;
  
              case "30岁到40岁":
  
                this.details = "thirtytoforty";
  
                break;
  
  
  
              case "40岁到45岁":
  
                this.details = "fortysvfifty";
  
                break;
  
              case "45岁到50岁":
  
                this.details = "fortysyfifty";
  
                break;
  
              case "50岁以上":
  
                this.details = "fiftyabove";
  
                break;
  
            }
  
  
  
            switch (types) {
  
              case "员工性别比例":
  
                this.type = 1;
  
                break;
  
              case "员工学历结构":
  
                this.type = 2;
  
                break;
  
              case "员工年龄结构":
  
                this.type = 3;
  
                break;
  
              default:
  
                break;
  
            }
  
  
  
            let params = {
  
              type: this.type,
  
              deptCategory: this.deptCategory,
  
              details: this.details,
  
              pageNum: 1,
  
              pageSize: 6
  
            };
  
  
  
            this.dialogTableVisible = true;
  
  
  
            if (this.$route.name == 'allStaff') {
  
              this.Axios.Post(URL.getemployeeByallList.url, params).then(res => {
  
                this.tableData = res.data.datas;
  
                this.total = res.data.total;
  
              })
  
            } else {
  
  
  
  
  
              this.Axios.Post(URL.queryListByType.url, params).then(res => {
  
                this.tableData = res.data.datas;
  
                this.total = res.data.total;
  
              })
  
            }
  
  
  
  
  
          }
  
        });
  
      },
  
      currentChange(index) {
  
        if (this.$route.name == 'allStaff') {
  
  
  
          let params = {};
  
          let pageNum = index;
  
          if (this.ageName) {
  
            params = {
  
              ageRange: this.ageName,
  
              pageNum: pageNum,
  
              pageSize: 6
  
            };
  
          } else if (this.sex) {
  
            params = {
  
              sex: this.sex,
  
              pageNum: pageNum,
  
              pageSize: 6
  
            };
  
          } else {
  
            params = {
  
              highestEdu: this.highestEdu,
  
              pageNum: pageNum,
  
              pageSize: 6
  
            };
  
          }
  
  
  
          this.Axios.Post(URL.getemployeeByallList.url, params).then(res => {
  
            this.tableData = res.data.datas;
  
            this.total = res.data.total;
  
          });
  
        } else {
  
          let params = {
  
            type: this.type,
  
            deptCategory: this.deptCategory,
  
            details: this.details,
  
            pageNum: index,
  
            pageSize: 6
  
          };
  
  
  
          this.Axios.Post(URL.queryListByType.url, params).then(res => {
  
            this.tableData = res.data.datas;
  
            this.total = res.data.total;
  
          });
  
        }
  
      }
  
    }
  
  };
</script>

<style scoped>
  .echart {
  
    margin-top: 20px;
  
  }
  
  
  
  .echart ul {
  
    overflow: hidden;
  
  }
  
  
  
  .echart li {
  
    border-top-width: 3px;
  
    border-top-style: solid;
  
    border-top-color: #00a65a;
  
    width: 48.5%;
  
    margin-bottom: 30px;
  
    overflow: hidden;

    float: left;
  
  }
  
  
  
  .echart li div,
  
  .echart li h3 {
  
    background-color: #fff !important;
  
  }
  
  
  
  .echart li:nth-of-type(2n-1) {
  
    margin-right: 28px;
  
  }
  
  
  
  .echart .title {
  
    border-bottom: 1px solid #f1f1f1;
  
    line-height: 40px;
  
    overflow: hidden;

    padding: 0 10px;
  
  }
  
  
  
  .echart .title span:first-of-type {
    float: left;
  
    font-size: 18px;
  
    font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
    color: rgb(68, 68, 68);
  
    font-weight: normal;
  
  }
  
  
  
  .echart .title span:last-of-type {
  
    font-size: 14px;
  
    font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
    color: rgb(151, 160, 179);
  
    font-weight: normal;

    float: right;
  
  }
  
  
  
  .echart .title span:last-of-type i {
  
    margin-left: 10px;
  
  }
  
  
  
  .echart .title i {
  
    cursor: pointer;
  
  }
  
  
  
  .content1 {
  
    padding: 12px 10px;
  
  }
  
  
  
  .content1 .wrapper {
  
    border: 1px solid #f4f4f4;
  
  }
  
  
  
  .content1 .wrapper div {
  
    width: 100%;
  
    overflow: hidden;
  
  }

  
  
  .content1 .wrapper div:nth-of-type(2n-1) {
  
    background-color: #f9f9f9;
  
  }
  
  
  
  .content1 .wrapper h3 {
  
    width: 100%;
  
    overflow: hidden;
  
    background-color: #f5f5f6;
  
  }
  
  
  
  .content1 .wrapper>div>span,
  
  .content1 .wrapper>h3>span {
  
    border-right: 1px solid #f4f4f4;
  
    float: left;

    width: 25%;
  
    text-align: center;
  
    padding: 4px 0;
  
  }
  
  
  
  .content1 .wrapper>div>span:last-of-type,
  
  .content1 .wrapper>h3>span:last-of-type {
  
    border-right: 0px solid black;
  
  }
  
  
  
  .content1 .wrapper>div>span:nth-of-type(1),
  
  .content1 .wrapper>h3>span:nth-of-type(1) {
  
    width: 8.3333%;
  
  }
  
  
  
  .content1 .wrapper>div>span:nth-of-type(2),
  
  .content1 .wrapper>h3>span:nth-of-type(2) {
  
    width: 41.66666%;
  
  }
</style>